<template>
  <div class="container">
    <!-- 顶部搜索 -->
    <div class="search-bar">
      <div class="search-content">
        <input type="text"
               v-model="keyword"
               placeholder="搜索"
               placeholder-class="placeholder"
               maxlength="20"
               class="search-inp"
               confirm-type="search"
               @confirm="get_list()">
        <div class="search-btn">
          <img :src="base_url+'/mp_3.2.4/%E6%94%BE%E5%A4%A7%E9%95%9C%20(1)%402x.png'"
               v-if="base_url"
               alt=""
               class="img">
        </div>
      </div>
      <div class="exit-btn"
           @tap="back()">取消</div>
    </div>
    <div class="search-detail clearfix">
      <scroll-view scroll-y
                   scroll-with-animation
                   @scrolltolower="loadmore"
                   style="height:100%">
        <!-- 搜索内容 -->
        <div class="search-result clearfix"
             v-if="show_result">
          <ul class="result-list"
              v-if="result_arr.length>0">
            <li class="list-item"
                v-for="(item, index) in result_arr"
                :key="index">
              <card :card_info="item"
                    v-if="item.type==1"></card>
              <ticket :ticket_info="item"
                      v-if="item.type==2"></ticket>
            </li>
          </ul>
          <div class="empty"
               v-else></div>
        </div>
        <!-- 搜索历史 -->
        <history v-if="!show_result"
                 @select_key="selected_key"></history>
      </scroll-view>

    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
import history from "@/components/ct_store/history";
import card from '@/components/ct_store/card'
import ticket from '@/components/ct_store/ticket'
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      keyword: "",
      isbottom: false,
      show_result: false,
      page: 1,
      result_arr: []
    };
  },
  methods: {
    // 获取列表
    get_list () {
      let that = this
      //   判断输入框的内容是否为空
      if (this.keyword == "" && this.page == 1) {
        wx.showToast({
          title: '搜索内容不可以为空哟', //提示的内容,
          icon: 'none', //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return false
      }
      if (this.isbottom) {
        return false
      }
      //   显示搜索结果
      this.show_result = true

      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/v4_5/c2c/card_ticket_list", {
        type: 0,
        size: 10,
        page: this.page,
        keyword: this.keyword
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          console.log(res);
          if (this.page == 1) {
            this.result_arr = res.data.data
          } else if (this.page > 1 && res.data.data.length > 0) {
            this.result_arr.push(...res.data.data)
          } else if (this.page > 1 && res.data.data.length == 0) {
            this.isbottom = true
          }
          wx.getStorage({
            key: "ct_history",
            success: res => {
              let arr = res.data, new_arr = []
              if (arr.length >= 10) {
                arr.pop()
                arr.unshift(that.keyword);
                arr.forEach(item => {
                  if (!new_arr.includes(item)) {
                    new_arr.push(item)
                  }
                });
                wx.setStorageSync("ct_history", new_arr);
              } else {
                arr.unshift(that.keyword);
                arr.forEach(item => {
                  if (!new_arr.includes(item)) {
                    new_arr.push(item)
                  }
                });
                wx.setStorageSync("ct_history", new_arr);
              }
            },
            fail: () => {
              wx.setStorageSync("ct_history", [that.keyword]);
            },
            complete: () => { }
          });
        }
      })
    },
    // 加载更多
    loadmore () {
      if (this.isbottom) {
        return false
      }
      this.page++
      this.get_list()
    },
    selected_key (data) {
      this.keyword = data;
      this.show_result = true;
      this.get_list()
    },
    back () {
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    }
  },
  watch: {
    keyword () {
      this.page = 1
    }
  },
  components: {
    history, card, ticket
  },
  onLoad (options) {
    let that = this

  },
  onShow () {
    wx.setNavigationBarTitle({ title: '卡券商城' });
    wx.setNavigationBarColor({
      frontColor: '#ffffff', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: '#3EB0A9', //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });

  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-bar {
    height: 54px;
    width: 100%;
    background-image: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.2.4/%E5%8D%A1%E5%88%B8%E5%95%86%E5%9F%8E-%E6%90%9C%E7%B4%A2%E7%A9%BA%E5%A4%87%E4%BB%BD%203.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    .search-content {
      flex: 1;
      margin-left: 16px;
      position: relative;
      .search-inp {
        width: 100%;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 15px;
        margin: 12px 0;
        padding-left: 36px;
        box-sizing: border-box;
      }
      .placeholder {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
      .search-btn {
        width: 16px;
        height: 16px;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        .img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
    .exit-btn {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 54px;
      padding: 0 16px;
    }
  }
  .search-detail {
    flex: 1;
    overflow: hidden;
    .search-result {
      width: 100%;
      min-height: 100%;
      background-color: rgba(243, 244, 246, 1);
      .result-list {
        margin: 0 12px;
        .list-item {
          margin-top: 12px;
        }
      }
    }
  }
}
</style>

